<template>
  <div class="dataInspect">
    <div style="flex: 1">
      <el-card shadow="never">
        <div slot="header" style="display: flex;align-items: center;justify-content: space-between;">
          <n-tab :options="tabOptions" @click="tabCheckHandler"/>
          <div class="ha-top">
            <el-select v-if="verifyTimesList && verifyTimesList.length > 0" v-model="selectFormModel.verifyTimes"
                       style="margin-right: 10px;" size="mini" @change="onVerifyTimesChange">
              <el-option
                  v-for="item in verifyTimesList"
                  :key="item.verifyTimes"
                  :label="item.verifyTimeLabel"
                  :value="item.verifyTimes">
              </el-option>
            </el-select>
            <el-button size="small" plain type="primary" @click="toSampleRule">核查抽样</el-button>
            <el-button size="small" plain type="primary" @click="exportDialogFormVisible = true">数据导出</el-button>
          </div>
        </div>
        <el-dialog title="抽样数据导出" :visible.sync="exportDialogFormVisible">
          <el-form :model="exportForm" ref="exportForm">
            <el-form-item required>
              <el-radio-group v-model="exportForm.exportDataType">
                <el-radio label="1">导出调查目录</el-radio>
                <el-radio label="2">导出调查表格</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item>
              <el-select v-model="exportForm.exportType" disabled>
                <el-option label="按调查对象分类导出" value="category"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select v-model="exportForm.areaCode" clearable :placeholder="`请选择下级${areaName}`">
                <el-option
                    v-for="item in subAreaList"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code">
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="exportDialogFormVisible = false">取 消</el-button>
            <el-button type="primary" :loading="exportFormLoading" @click="exportVerifyData">确 定</el-button>
          </div>
        </el-dialog>
        <div style="background-color: #5b9a8e;font-size: 15px;padding: 5px 0" v-if="bigCategoryCountInfo">
          <span style="color: red">抽样信息：</span>{{ bigCategoryCountInfo }}
        </div>
        <el-tabs v-model="filterActiveName" @tab-click="handleTabFilterClick">
          <el-tab-pane label="按类型筛选" name="categoryFilter">
            <el-select v-model="selectFormModel.categoryId"
                       style="margin-right: 10px;" placeholder="请选择类型" size="mini" @change="onCategorySearch">
              <el-option
                  v-for="item in categoryList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
              </el-option>
            </el-select>
            <data-table
                :api="selectVerifyDataStatsByCategory"
                ref="categoryDataTable"
                :options="options"
                :columns="categoryFilterColumns"
                :operates="categoryFilterOperates"
                :query="selectFormModel"
            ></data-table>
          </el-tab-pane>
          <el-tab-pane :label="`按${areaName}筛选`" name="areaFilter">
            <el-select v-model="selectFormModel.areaCode"
                       style="margin-right: 10px;" :placeholder="`请选择下级${areaName}`" size="mini"
                       @change="onAreaSearch">
              <el-option
                  v-for="item in subAreaList"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code">
              </el-option>
            </el-select>
            <data-table
                :api="selectVerifyDataStatsByArea"
                ref="areaDataTable"
                :options="options"
                :columns="areaFilterColumns"
                :operates="areaFilterOperates"
                :query="selectFormModel"
            ></data-table>
          </el-tab-pane>
        </el-tabs>

      </el-card>
    </div>
  </div>
</template>

<script lang="ts">
import {Component, Ref, Vue} from 'vue-property-decorator';
import DataTable from "@/components/DataTable/DataTable.vue";
import NTab from "@/components/NTab.vue";
import {
  queryWorkVerifyTimes,
  selectVerifyDataStatsByCategory,
  selectVerifyDataStatsByArea,
  getVerifyDataCategoryInfo,
  queryVerifyWorkList,
  exportVerifyCatalog
} from "@/api/verifyWork";
import {queryUserSubArea} from "@/api/area"
import {getMinCategory} from '@/api/investCategory';
import storeUtils from "@/utils/storeUtils";

@Component({
  methods: {selectVerifyDataStatsByCategory, selectVerifyDataStatsByArea},
  components: {NTab, DataTable}
})
export default class verifyWork extends Vue {
  @Ref('categoryDataTable') private categoryDataTable: any;
  @Ref('areaDataTable') private areaDataTable: any;
  @Ref('exportForm') private exportFormRef: any;
  public getTaskList: any;
  filterActiveName = 'categoryFilter';
  verifyTimesList: any = [];
  categoryList: any = [];
  subAreaList: any = [];
  bigCategoryCountInfo: any = '';
  tabOptions: any = [];
  areaName = '区县'
  exportDialogFormVisible = false;
  exportFormLoading = false;
  //导出表单
  exportForm: any = {
    exportType: 'category',
    exportDataType: '1',
    areaCode: undefined
  }

  //筛选类型切换处理
  handleTabFilterClick(tab, event) {
    if (tab.name == 'categoryFilter') {
      this.onCategorySearch()
    } else if (tab.name == 'areaFilter') {
      this.onAreaSearch()
    }
  }

  //调查任务切换
  tabCheckHandler(data) {
    this.queryVerifyTimes(data.item.id);
    this.selectFormModel.workId = data.item.id;
  }

  //类别筛选-列
  categoryFilterColumns: any = [
    {label: '调查区划大类', prop: 'bigCategoryName'},
    {label: '调查区划中类', prop: 'midCategoryName'},
    {label: '调查区划小类', prop: 'categoryName'},
    {label: '总数', prop: 'verifyCount'}
  ];

  // table 的参数
  options: any = {
    stripe: true, // 是否为斑马纹 table
    loading: false, // 是否添加表格loading加载动画
    highlightCurrentRow: true, // 是否支持当前行高亮显示
    multipleSelect: false, // 是否支持列表项选中功能
    page: false
  };

  //类别筛选-按钮操作组
  categoryFilterOperates: any = {
    title: '操作',
    width: 'auto',
    fixed: 'right',
    list: [
      {
        label: '查看',
        type: 'text',
        icon: 'el-icon-view',
        plain: true,
        disabled: (index: any, row: any) => {
          return false;
        },
        method: (index: any, row: any) => {
          this.$router.push({
            path: '/verify/dataInfo',
            query: {
              workId: this.selectFormModel.workId,
              verifyTimes: this.selectFormModel.verifyTimes,
              categoryId: row.categoryId,
              sampleType: '1'
            }
          });
        }
      }
    ]
  };
  //查询参数
  selectFormModel: any = {
    workId: undefined,
    verifyTimes: undefined,
    categoryId: undefined,
    areaCode: undefined
  };

  //区域筛选-列
  areaFilterColumns: any = [
    {label: '所在省', prop: 'provinceName'},
    {label: '所在市', prop: 'eparchyName'},
    {label: '所在县', prop: 'countyName'},
    {label: '调查总数', prop: 'verifyCount'},
    {label: '抽样数量', prop: 'verifyCount'}
  ];

  //区域筛选-按钮操作组
  areaFilterOperates: any = {
    title: '操作',
    width: 'auto',
    fixed: 'right',
    list: [
      {
        label: '查看',
        type: 'text',
        icon: 'el-icon-view',
        plain: true,
        disabled: (index: any, row: any) => {
          return false;
        },
        method: (index: any, row: any) => {
          this.$router.push({
            path: '/verify/dataInfo',
            query: {
              workId: this.selectFormModel.workId,
              verifyTimes: this.selectFormModel.verifyTimes,
              areaCode: row.countyCode,
              sampleType: '2'
            }
          });
        }
      }
    ]
  };

  //筛选次数修改
  onVerifyTimesChange(): void {
    this.getVerifyDataCategoryCountInfo();
    if (this.filterActiveName == 'categoryFilter') {
      this.onCategorySearch()
    } else if (this.filterActiveName == 'areaFilter') {
      this.onAreaSearch()
    }
  }

  //类别筛选列表查询
  onCategorySearch(): void {
    this.selectFormModel.areaLevel = undefined;
    this.selectFormModel.areaCode = undefined;
    this.categoryDataTable.refresh();
  }

  //区划筛选列表查询
  onAreaSearch(): void {
    this.selectFormModel.categoryId = undefined

    if (this.subAreaList.length > 0) {
      let areas = this.subAreaList.filter(area => area.code == this.selectFormModel.areaCode);
      if (areas.length > 0) {
        this.selectFormModel.areaLevel = areas[0].level;
      }
      this.areaDataTable.refresh();
    }
  }

  //查询调查任务抽样次数
  queryVerifyTimes(workId) {
    queryWorkVerifyTimes({workId: workId}).then(res => {
      if (res.data) {
        this.verifyTimesList = res.data
        this.selectFormModel.verifyTimes = res.data[0].verifyTimes
        this.getVerifyDataCategoryCountInfo()
        if (this.filterActiveName == 'categoryFilter') {
          this.onCategorySearch()
        } else if (this.filterActiveName == 'areaFilter') {
          this.onAreaSearch()
        }
      }
    })
  }

  /**
   * 查询大类统计描述
   */
  getVerifyDataCategoryCountInfo() {
    getVerifyDataCategoryInfo({
      workId: this.selectFormModel.workId,
      verifyTimes: this.selectFormModel.verifyTimes
    }).then(res => {
      if (res.data) {
        this.bigCategoryCountInfo = res.data.categoryInfo
      }
    })
  }

  //导出数据核查数据
  exportVerifyData() {
    this.exportFormLoading = true;
    let param = {
      ...this.exportForm,
      workId: this.selectFormModel.workId,
      verifyTimes: this.selectFormModel.verifyTimes
    }
    exportVerifyCatalog(param)
    this.exportFormLoading = false;
    this.exportDialogFormVisible = false;
  }

  //跳转数据抽样规则页面
  toSampleRule() {
    this.$router.push({
      path: '/verify/sampleRule',
      query: {workId: this.selectFormModel.workId, verifyTimes: this.selectFormModel.verifyTimes}
    });
  }

  mounted() {
    var dept = storeUtils.getStorageS(storeUtils.CONST.departInfo)
    if (dept) {
      if (dept.areaLevel == '1') {
        this.areaName = '地市'
      } else if (dept.areaLevel == '0') {
        this.areaName = '省'
      }
    }

    //调查任务
    queryVerifyWorkList().then(res => {
      if (res.data) {
        res.data.forEach(wd => {
          this.tabOptions.push({label: wd.name, id: wd.id});
        })
        this.tabCheckHandler({item: this.tabOptions[0]});
      }
    });
    //获取调查类别列表
    getMinCategory().then(res => {
      if (res.data) {
        this.categoryList = res.data
      }
    });
    //获取登录人的下级区域列表
    queryUserSubArea().then(res => {
      if (res.data) {
        this.subAreaList = res.data
      }
    })
  }
}
</script>
<style lang="scss" scoped>
.dataInspect {
  display: flex;
  gap: 10px;

  .ha-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .radio-t {
      display: flex;
      align-items: center;
      gap: 6px;

      span {
        font-size: 14px;
      }
    }
  }
}

.m-b10 {
  height: 40px;
}
</style>
